
<template>
  <div class="photo-gallery">
    <!-- 三行滚动布局 -->
    <div class="photo-rows-container">
      <!-- 第一行（奇数行）- 向右滚动 -->
      <div class="photo-row photo-row-odd">
        <div class="photo-scroll-track" :style="{ animationPlayState: isScrollingPaused ? 'paused' : 'running' }">
          <div 
            v-for="(photo, index) in photos" 
            :key="photo.id"
            class="photo-item"
            @mouseenter="pauseScroll(index)"
            @mouseleave="resumeScroll(index)"
            @click="openModal(photo)"
          >
            <div class="photo-container">
              <img 
                :src="photo.thumbnail" 
                :alt="photo.title || '照片' + (index + 1)"
                class="photo-thumbnail"
                :class="{ 'zoomed': hoverIndex === index }"
                loading="lazy"
                @load="handleImageLoad"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 第二行（偶数行）- 向左滚动 -->
      <div class="photo-row photo-row-even">
        <div class="photo-scroll-track" :style="{ animationPlayState: isScrollingPaused ? 'paused' : 'running' }">
          <div 
            v-for="(photo, index) in photos" 
            :key="photo.id + '-even'"
            class="photo-item"
            @mouseenter="pauseScroll(index)"
            @mouseleave="resumeScroll(index)"
            @click="openModal(photo)"
          >
            <div class="photo-container">
              <img 
                :src="photo.thumbnail" 
                :alt="photo.title || '照片' + (index + 1)"
                class="photo-thumbnail"
                :class="{ 'zoomed': hoverIndex === index }"
                loading="lazy"
                @load="handleImageLoad"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 第三行（奇数行）- 向右滚动 -->
      <div class="photo-row photo-row-odd">
        <div class="photo-scroll-track" :style="{ animationPlayState: isScrollingPaused ? 'paused' : 'running' }">
          <div 
            v-for="(photo, index) in photos" 
            :key="photo.id + '-odd'"
            class="photo-item"
            @mouseenter="pauseScroll(index)"
            @mouseleave="resumeScroll(index)"
            @click="openModal(photo)"
          >
            <div class="photo-container">
              <img 
                :src="photo.thumbnail" 
                :alt="photo.title || '照片' + (index + 1)"
                class="photo-thumbnail"
                :class="{ 'zoomed': hoverIndex === index }"
                loading="lazy"
                @load="handleImageLoad"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      <div class="loading-spinner"></div>
      <p>正在加载照片...</p>
    </div>

    <!-- 空状态 -->
    <div v-else-if="photos.length === 0" class="empty-state">
      <p>暂无照片</p>
    </div>

    <!-- 图片详情模态框 -->
    <div v-if="selectedPhoto" class="modal" @click.self="closeModal">
      <div class="modal-content">
        
        <div class="modal-body">
          <!-- 左侧图片区域 -->
          <div class="modal-image-container">
            <img 
              :src="selectedPhoto.fullSize" 
              :alt="selectedPhoto.title"
              class="modal-image"
              loading="eager"
            />
          </div>

          <!-- 右侧信息区域 -->
          <div class="modal-info">
            <div class="info-header">
              <p class="info-date">{{ selectedPhoto.date || '未知日期' }}</p>
            </div>

            <div v-if="selectedPhoto.description" class="info-description">
              <p>{{ selectedPhoto.description }}</p>
            </div>

            <div class="info-actions">
              <button class="btn-primary" @click="downloadPhoto(selectedPhoto)">
                📥 下载
              </button>
              <button class="btn-secondary" @click="closeModal">
                关闭
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

interface Photo {
  id: number
  title?: string
  description?: string
  date?: string
  thumbnail: string
  fullSize: string
  dimensions?: string
  format?: string
  size?: string
  tags?: string[]
}

const photos = ref<Photo[]>([])
const selectedPhoto = ref<Photo | null>(null)
const hoverIndex = ref<number | null>(null)
const loading = ref(true)
const loadedImages = ref(0)
const isScrollingPaused = ref(false)

// 扫描图片目录
const scanImageDirectory = async (): Promise<Photo[]> => {
  try {
    // 这里应该是实际的目录扫描逻辑
    // 由于浏览器安全限制，无法直接读取本地文件系统
    // 在实际项目中，您可能需要：
    // 1. 使用后端API提供图片列表
    // 2. 使用静态图片列表
    // 3. 使用Webpack或Vite的import.meta.glob功能
    
    // 模拟从public目录读取图片
    const imageFiles = [
      '/img/background.JPG',
      '/img/cardGround.jpg', 
      '/img/coderain.png',
      '/img/cube-filled.png',
      '/img/lives.JPG',
      '/img/ascii.gif'
    ]
    
    return imageFiles.map((path, index) => ({
      id: index + 1,
      title: `照片 ${index + 1}`,
      description: `这是第 ${index + 1} 张照片的描述`,
      date: new Date(Date.now() - Math.random() * 31536000000).toLocaleDateString('zh-CN'),
      thumbnail: path,
      fullSize: path,
      dimensions: '1920×1080',
      format: path.split('.').pop()?.toUpperCase() || '未知',
      size: `${Math.floor(Math.random() * 5000) + 1000} KB`,
      tags: ['风景', '自然', '艺术'].slice(0, Math.floor(Math.random() * 3) + 1)
    }))
  } catch (error) {
    console.error('扫描图片目录失败:', error)
    return []
  }
}

// 暂停滚动效果（鼠标移入）
const pauseScroll = (index: number) => {
  hoverIndex.value = index
  isScrollingPaused.value = true
}

// 恢复滚动效果（鼠标移出）
const resumeScroll = (index: number) => {
  if (hoverIndex.value === index) {
    hoverIndex.value = null
    isScrollingPaused.value = false
  }
}

// 处理图片加载
const handleImageLoad = () => {
  loadedImages.value++
  if (loadedImages.value >= photos.value.length) {
    loading.value = false
  }
}

// 打开模态框
const openModal = (photo: Photo) => {
  selectedPhoto.value = photo
  document.body.style.overflow = 'hidden'
}

// 关闭模态框
const closeModal = () => {
  selectedPhoto.value = null
  document.body.style.overflow = 'auto'
}

// 下载照片
const downloadPhoto = async (photo: Photo) => {
  try {
    const response = await fetch(photo.fullSize)
    const blob = await response.blob()
    const url = URL.createObjectURL(blob)
    
    const a = document.createElement('a')
    a.href = url
    a.download = `photo-${photo.id}.${photo.format?.toLowerCase() || 'jpg'}`
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)
    URL.revokeObjectURL(url)
    
    console.log('下载成功:', photo.title)
  } catch (error) {
    console.error('下载失败:', error)
    alert('下载失败，请稍后重试')
  }
}

// 初始化照片
const initPhotos = async () => {
  loading.value = true
  const scannedPhotos = await scanImageDirectory()
  photos.value = scannedPhotos
  
  // 如果短时间内没有图片加载完成，自动停止加载状态
  setTimeout(() => {
    if (loading.value) {
      loading.value = false
    }
  }, 3000)
}

onMounted(() => {
  initPhotos()
})

onUnmounted(() => {
  document.body.style.overflow = 'auto'
})
</script>

<style scoped>
.photo-gallery {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100vh;
  min-width: 100vw;
  background: linear-gradient(135deg, #1a202c 0%, #2d3748 50%, #4a5568 100%);
  padding: 0;
  margin: 0;
  overflow: hidden;
  backdrop-filter: blur(20px);
}

/* 三行布局容器 */
.photo-rows-container {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem 0;
}

/* 单行容器 */
.photo-row {
  overflow: hidden;
  padding: 1rem 0;
}

.photo-scroll-track {
  display: flex;
  gap: 2rem;
  padding: 0 2rem;
}

/* 奇数行 - 向右滚动 */
.photo-row-odd .photo-scroll-track {
  animation: scrollRight 30s linear infinite;
}

/* 偶数行 - 向左滚动 */
.photo-row-even .photo-scroll-track {
  animation: scrollLeft 30s linear infinite;
}

@keyframes scrollRight {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.photo-item {
  flex: 0 0 auto;
  width: 300px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.photo-item:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.15);
}

.photo-container {
  position: relative;
  width: 100%;
  height: 250px;
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.photo-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.photo-thumbnail.zoomed {
  transform: scale(1.05);
}

.photo-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.8));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  opacity: 0;
  transition: all 0.3s ease;
}

.photo-item:hover .photo-overlay {
  opacity: 1;
}

.photo-info {
  color: white;
}

.photo-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.photo-date {
  font-size: 0.9rem;
  opacity: 0.9;
  margin: 0;
}

.photo-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.action-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  color: white;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

/* 加载状态 */
.loading-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.3);
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.empty-state {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.2rem;
  backdrop-filter: blur(10px);
  background: rgba(0, 0, 0, 0.3);
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 模态框样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  padding: 2rem;
  backdrop-filter: blur(20px);
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-content {
  position: relative;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  background: rgba(45, 55, 72, 0.95);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes scaleIn {
  from { 
    transform: scale(0.9); 
    opacity: 0; 
  }
  to { 
    transform: scale(1); 
    opacity: 1; 
  }
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 1001;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.9);
  transform: scale(1.1);
}

.modal-body {
  display: flex;
  height: 100%;
}

.modal-image-container {
  flex: 3;
  display: flex;
  flex-direction: column;
  background: rgba(26, 32, 44, 0.8);
  padding: 2rem;
  backdrop-filter: blur(10px);
}

.modal-image {
  width: 100%;
  height: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.image-actions {
  margin-top: 1.5rem;
  text-align: center;
}

.download-btn {
  background: #667eea;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
}

.download-btn:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
}

.modal-info {
  flex: 2;
  padding: 2.5rem;
  overflow-y: auto;
  background: rgba(45, 55, 72, 0.95);
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.info-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.info-header h2 {
  margin: 0 0 0.5rem 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: 1.8rem;
  font-weight: 700;
}

.info-date {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  margin: 0;
}

.info-details {
  margin-bottom: 2rem;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-label {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.detail-value {
  color: rgba(255, 255, 255, 0.7);
}

.info-description {
  margin-bottom: 2rem;
}

.info-description h3 {
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
}

.info-description p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.6;
  margin: 0;
}

.info-tags {
  margin-bottom: 2rem;
}

.info-tags h3 {
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  padding: 0.4rem 0.8rem;
  border-radius: 15px;
  font-size: 0.85rem;
  font-weight: 500;
  backdrop-filter: blur(10px);
}

.info-actions {
  display: flex;
  gap: 1rem;
}

.btn-primary {
  background: #667eea;
  color: white;
  border: none;
  padding: 0.875rem 1.75rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
  flex: 1;
  backdrop-filter: blur(10px);
}

.btn-primary:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 0.875rem 1.75rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s ease;
  flex: 1;
  backdrop-filter: blur(10px);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .modal-body {
    flex-direction: column;
  }
  
  .modal-image-container {
    flex: none;
    height: 50vh;
  }
  
  .modal-info {
    flex: none;
    max-height: 40vh;
  }
}

@media (max-width: 768px) {
  .photo-gallery {
    padding: 1rem;
  }
  
  .photo-scroll-container {
    padding: 1rem 0;
  }
  
  .photo-scroll-track {
    gap: 1rem;
    padding: 0 1rem;
  }
  
  .photo-item {
    width: 250px;
  }
  
  .photo-container {
    height: 200px;
  }
  
  .modal {
    padding: 1rem;
  }
  
  .modal-content {
    width: 95%;
    max-height: 95vh;
  }
  
  .modal-image-container {
    padding: 1rem;
  }
  
  .modal-info {
    padding: 1.5rem;
  }
  
  .info-actions {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .photo-item {
    width: 200px;
  }
  
  .photo-container {
    height: 180px;
  }
  
  .modal-body {
    flex-direction: column;
  }
  
  .modal-image-container {
    height: 40vh;
    padding: 1rem;
  }
  
  .modal-info {
    max-height: 50vh;
    padding: 1.25rem;
  }
  
  .info-header h2 {
    font-size: 1.5rem;
  }
}
</style>
